<template>
  <el-container>
    <el-header
      class="header"
      height="30px"
    >
      <n-header :is-back="true"></n-header>
    </el-header>
    <el-main class="main">
      <n-search-bar
        :logoSize="5"
        :searchSize="12"
        :otherSize="-1"
        justify="center"
        :searchStyle="{ height: '100px', backgroundColor: '#fff' }"
        :logoStyle="{ fontSize: '100px' }"
      >
        <template #search>
          <search-bar></search-bar>
        </template>
      </n-search-bar>
      <el-row
        class="info-bar"
        justify="space-between"
      >
        <span style="line-height: 30px">{{ data.typeName }}</span>
        <span style="line-height: 30px">{{ data.storeName }}</span>
      </el-row>
      <commodity-info
        :commodityId="this.$route.query.id"
        :commodityName="data.commodityName"
        :image="data.image"
        :price="data.price"
        :inventory="data.inventory"
      ></commodity-info>
      <div style="display: flex; justify-content: center;">
        <store-info
          :storeName="data.storeName"
          :storeId="data.storeId"
        ></store-info>
        <commodity-tabs :commodityId="this.$route.query.id" :introduce="data.introduce"></commodity-tabs>
      </div>
    </el-main>
    <el-footer> </el-footer>
  </el-container>
</template>

<script>
import NHeaderVue from "@/components/NHeader.vue";
import SearchBarVue from "@/components/commodity/SearchBar.vue";
import NSearchBarVue from "@/components/NSearchBar.vue";
import CommodityInfoVue from "@/components/commodity/CommodityInfo.vue";
import StoreInfoVue from "@/components/commodity/StoreInfo.vue";
import CommodityTabsVue from "@/components/commodity/CommodityTabs.vue";
import { commoditySelectId } from "@/api/commodity";

export default {
  components: {
    NHeader: NHeaderVue,
    SearchBar: SearchBarVue,
    NSearchBar: NSearchBarVue,
    CommodityInfo: CommodityInfoVue,
    StoreInfo: StoreInfoVue,
    CommodityTabs: CommodityTabsVue,
  },
  data() {
    return {
      data: {},
    };
  },
  methods: {
    doCommoditySelectId() {
      commoditySelectId(this.$route.query.id).then((res) => {
        this.data = res;
      });
    },
  },
  created() {
    this.doCommoditySelectId();
  },
};
</script>

<style scoped>
.header {
  background-color: #eae5e3;
}
.main {
  background-color: #fff;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.info-bar {
  background-color: #f2f2f2;
  width: 100%;
  height: 30px;
  padding: 0 100px;
  color: #999999;
}
</style>